<template>
  <div class="project">
    <h4>
      <span class="back" @click="back"><van-icon name="arrow-left" />返回</span>
      <p>{{ conData ? conData.proAndDevCon.pname : "" }}</p>
    </h4>
    <van-tabs v-model="tabActive" animated @click="tabClick" background="#78e8e3" title-active-color="#6e94ab" title-inactive-color="#5d6f6e" >
      <van-tab :title="conData ? conData.proAndDevCon.dname : ''" :name="1">
        <contract :kData="kaiData" v-if="!isShowGrant && kaiData.length > 0" />
      </van-tab>
      <van-tab :title="conData ? conData.proAndDevCon.cname : ''" :name="2">
        <develop
          ref="develop"
          :cData="chengData"
          v-show="!isShowGrant && chengData.length > 0"
        />
      </van-tab>
    </van-tabs>
    <div class="grant" v-show="isShowGrant">
      <div id="ganttChart"></div>
    </div>
  </div>
</template>

<script>
import contract from "../contract/index";
import develop from "../develop/index";
import { getErIndex, getKaiProjects, getChengProjects } from "@/request/api.js";
export default {
  name: "Project",
  components: {
    contract,
    develop,
  },
  data() {
    return {
      tabActive: 0,
      isShowGrant: true,
      pid: "",
      conData: "", //conData.stages 为甘特图数组数据
      ganttData: [], // 甘特图数据
      kaiData: [], //开发商子项目
      chengData: [], //承建商子项目,
      chengType: 1,
    };
  },
  mounted() {
    const self = this;
    this.pid = this.$route.params.pid;
    getErIndex({ pid: this.pid }).then((res) => {
      self.conData = res;
      let stages = res.stages;
      let ganttData = [];
      for (let i = 0; i < stages.length; i++) {
        let item = {};
        item["series"] = [];
        item["name"] = stages[i].sname;
        item["sid"] = stages[i].sid;
        item["id"] = stages[i].pid;
        let time = {};
        time["start"] = stages[i].starttime;
        time["end"] = stages[i].endtime;
        time["name"] = stages[i].sname;
        // time["name"] = '';
        item["series"].push(time);
        ganttData.push(item);
      }
      // console.log(JSON.stringify(ganttData));
      self.ganttData = ganttData;
      // 渲染甘特图
      $("#ganttChart").ganttView({
        data: self.ganttData,
        vtHeaderWidth: 60,
        showWeekends: false,
      });
    });
  },
  methods: {
    tabClick(name, title) {
      this.isShowGrant = false;
      if (name == 1) {
        getKaiProjects({
          pid: this.pid,
          did: this.conData.proAndDevCon.did,
        }).then((res) => {
          this.kaiData = res;
        });
      } else if (name == 2) {
        getChengProjects({
          pid: this.pid,
          cid: this.conData.proAndDevCon.cid,
        }).then((res) => {
          this.chengData = res;
          this.$nextTick(() => {
            this.$refs.develop.fTabClick();
          });
        });
      }
    },
    back() {
      if (this.isShowGrant) {
        this.isShowGrant = false;
        this.$router.push({ path: "/" });
      } else {
        this.isShowGrant = true;
        console.log(this.ganttData);
        $("#ganttChart").ganttView({
          data: this.ganttData,
          vtHeaderWidth: 60,
          showWeekends: false,
        });
      }
    },
  },
};
</script>
<style lang="scss">
#ganttChart {
  font-family: tahoma, verdana, helvetica;
  font-size: 0.8em;
  padding: 10px;
}

.ganttview-vtheader-item-name {
  width: 100%;
}
.back {
  display: flex;
  align-items: center;
  float: left;
  font-size: 14px;
  font-weight: 500;
  padding: 0 10px;
  position: fixed;
  top: 22px;
}
.van-tabs__line {
    background-color: #6da4a7;
}
</style>
